<html><head><meta charset="utf-8"><title>书写声明文件之磨刀：识别库类型-慕课专栏</title>
			<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
			<meta name="renderer" content="webkit">
			<meta property="qc:admins" content="77103107776157736375">
			<meta property="wb:webmaster" content="c4f857219bfae3cb">
			<meta http-equiv="Access-Control-Allow-Origin" content="*">
			<meta http-equiv="Cache-Control" content="no-transform ">
			<meta http-equiv="Cache-Control" content="no-siteapp">
			<link rel="apple-touch-icon" sizes="76x76" href="https://www.imooc.com/static/img/common/touch-icon-ipad.png">
			<link rel="apple-touch-icon" sizes="120x120" href="https://www.imooc.com/static/img/common/touch-icon-iphone-retina.png">
			<link rel="apple-touch-icon" sizes="152x152" href="https://www.imooc.com/static/img/common/touch-icon-ipad-retina.png">
			<link href="https://moco.imooc.com/captcha/style/captcha.min.css" rel="stylesheet">
			<link rel="stylesheet" href="https://www.imooc.com/static/moco/v1.0/dist/css/moco.min.css?t=201907021539" type="text/css">
			<link rel="stylesheet" href="https://www.imooc.com/static/lib/swiper/swiper-3.4.2.min.css?t=201907021539">
			<link rel="stylesheet" href="https://static.mukewang.com/static/css/??base.css,common/common-less.css?t=2.5,column/zhuanlanChapter-less.css?t=2.5,course/inc/course_tipoff-less.css?t=2.5?v=201907051055" type="text/css">
			<link charset="utf-8" rel="stylesheet" href="https://www.imooc.com/static/lib/ueditor/themes/imooc/css/ueditor.css?v=201907021539"><link rel="stylesheet" href="https://www.imooc.com/static/lib/baiduShare/api/css/share_style0_16.css?v=6aba13f0.css"></head>
			<body><div id="main">

<div class="container clearfix" id="top" style="display: block; width: 1134px;">
    
    <div class="center_con js-center_con l" style="width: 1134px;">
        <div class="article-con">
                            <!-- 买过的阅读 -->
                <div class="map">
                    <a href="/read" target="_blank"><i class="imv2-feather-o"></i></a>
                    <a href="/read/35" target="_blank">零基础学透 TypeScript</a>
                    <a href="" target="_blank">
                        <span>
                            / 5-2 书写声明文件之磨刀：识别库类型
                        </span>
                    </a>
                </div>

            


            <div class="art-title" style="margin-top: 0px;">
                书写声明文件之磨刀：识别库类型
            </div>
            <div class="art-info">
                
                <span>
                    更新时间：2019-07-19 14:03:18
                </span>
            </div>
            <div class="art-top">
                                <img src="https://img2.mukewang.com/5d2fe3800001ed6006400359.jpg" alt="">
                                                <div class="famous-word-box">
                    <img src="https://www.imooc.com/static/img/column/bg-l.png" alt="" class="bg1 bg">
                    <img src="https://www.imooc.com/static/img/column/bg-r.png" alt="" class="bg2 bg">
                    <div class="famous-word">每个人的生命都是一只小船，理想是小船的风帆。<p class="author">——张海迪</p></div>
                </div>
                            </div>
            <div class="art-content js-lookimg">
                <div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">前面我们提到几次<code>.d.ts</code>后缀的文件，这节课我们来完整学习下与声明文件相关的内容。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">我们之前讲模块的时候讲到过两种常见模块标准，即 CommonJS 和 RequireJS。不同的模块在实现方式上是不一样的。我们要为已有的第三方 JS 库编写声明文件，以便在 TS 中更好地使用类型系统，所以首先需要知道我们使用的 JS 库被编译成了什么类型。我们来分别看下几种类型的特征：</p>
</div><div class="cl-preview-section"><h3 id="全局库">5.2.1. 全局库</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">在一开始，没有 webpack 这些编译工具的时候，我们都是在 html 文件里使用 script 标签引入 js 文件，然后就可以在引入的后面使用引入的库了。比如我们使用 jQuery，只需要在<code>&lt;body&gt;</code>标签里通过<code>&lt;script src=“<a href="http://xxx.com/jQuery.min.js">http://xxx.com/jQuery.min.js</a>”&gt;&lt;/script&gt;</code>引入 jQuery 库，然后就可以在<code>&lt;script&gt;&lt;/script&gt;</code>标签内使用：</p>
</div><div class="cl-preview-section"><pre class="  language-javascript"><code class="prism  language-javascript"><span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这种不需要我们引入什么变量，只需要将库引入即可使用的库，就叫做<strong>全局库</strong>。后面讲到 UMD 模块的时候要注意，UMD 模块既可以作为模块使用，又可以作为全局库使用的模块，所以在判断一个库的时候，如果它可以像例子中那样全局使用，首先要确定它是不是 UMD 模块；如果不是，那它可能就是一个单纯的全局库。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">另外，你还可以通过看库的源码，来判断它是什么类型，一个全局库，通常会包含下面内容中的一个或多个：</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">顶级的 var 语句或 function 声明；</li>
<li style="font-size: 20px; line-height: 38px;">一个或多个赋值给 window.someName 的赋值语句；</li>
<li style="font-size: 20px; line-height: 38px;">判断 document 或 window 是否存在的判断逻辑。</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">因为顶级的 var 或 function 是直接在全局环境声明变量或函数，不使用立即执行函数包裹会影响到全局，所以有这种一般会是全局库；当出现给 window 设置某个属性名 someName ，然后给这个属性赋值的语句时，是在给全局对象 window 赋值。引入这个库后直接通过 window.someName 即可在全局任何地方访问到这个属性值；如果出现 if 语句或三元操作符这种判断 document 或 window 是否存在的语句，也有可能是要给这两个全局对象添加内容，所以也有可能是全局库。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">但是由于把一个全局库转变成 UMD 库较为容易，所以现在全局库较少。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">我们来着手为下面这个简单的示例全局库编写一个全局库声明文件，先来看这个全局库的代码：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token comment">// handle-title.js</span>
<span class="token keyword">function</span> <span class="token function">setTitle</span><span class="token punctuation">(</span>title<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  document <span class="token operator">&amp;&amp;</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span>title <span class="token operator">=</span> title<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">getTitle</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>document <span class="token operator">&amp;&amp;</span> document<span class="token punctuation">.</span>title<span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token string">""</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">let</span> documentTitle <span class="token operator">=</span> <span class="token function">getTitle</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这个 handle-title.js 库非常简单，声明了一个 setTitle 函数，接收一个参数，在函数内首先通过&amp;&amp;符判断 document 是否不为 undefined，如果不为 undefined，才会执行后面的逻辑，将 title 赋值给 document.title，从而实现修改显示在浏览器标签的文字；一个 getTitle 函数，用于获取此时的 title 值，如果没有 document 对象，则返回空字符串；一个全局变量 documentTitle，用来在初始化时记录当前的 title。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">我们要为这个 handle-title.js 全局库编写一个声明文件<em>handle-title.d.ts</em>，官方为每一种库类型都提供了响应的声明文件模板，全局库的模板是<em>global.d.ts</em>，我们首先来看一下这个模板中的内容：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token comment">// 如果这个库有一个全局暴露的函数，他可能可以传入不同类型的参数，返回不同的值，所以可以为它定义函数重载</span>
<span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token function">myLib</span><span class="token punctuation">(</span>a<span class="token punctuation">:</span> <span class="token keyword">string</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword">string</span><span class="token punctuation">;</span>
<span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token function">myLib</span><span class="token punctuation">(</span>a<span class="token punctuation">:</span> <span class="token keyword">number</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword">number</span><span class="token punctuation">;</span>
<span class="token comment">// 如果你想让这个库名作为一种类型，可以定义一个接口</span>
<span class="token keyword">declare</span> <span class="token keyword">interface</span> <span class="token class-name">myLib</span> <span class="token punctuation">{</span>
  name<span class="token punctuation">:</span> <span class="token keyword">string</span><span class="token punctuation">;</span>
  length<span class="token punctuation">:</span> <span class="token keyword">number</span><span class="token punctuation">;</span>
  extras<span class="token operator">?</span><span class="token punctuation">:</span> <span class="token keyword">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// 如果这个库有一些需要在全局暴露的属性，可以定义这个命名空间，将值、接口和类型别名等定义在这里</span>
<span class="token comment">// 这样，在下面命名空间中没有列出的内容，通过myLib.xxx访问时在编译阶段会报错，但是运行时是可以访问的，只要这个JS库里定义了。</span>
<span class="token keyword">declare</span> <span class="token keyword">namespace</span> myLib <span class="token punctuation">{</span>
  <span class="token keyword">let</span> timeout<span class="token punctuation">:</span> <span class="token keyword">number</span><span class="token punctuation">;</span> <span class="token comment">// 通过myLib.timeout访问，也可以修改: myLib.timeout = 123</span>
  <span class="token keyword">const</span> version<span class="token punctuation">:</span> <span class="token keyword">string</span><span class="token punctuation">;</span> <span class="token comment">// 可通过myLib.version访问，但不能修改，因为是const声明的</span>
  <span class="token keyword">class</span> <span class="token class-name">Cat</span> <span class="token punctuation">{</span>
    <span class="token keyword">constructor</span><span class="token punctuation">(</span>n<span class="token punctuation">:</span> <span class="token keyword">number</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    readonly age<span class="token punctuation">:</span> <span class="token keyword">number</span><span class="token punctuation">;</span>
    <span class="token function">purr</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword">void</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">interface</span> <span class="token class-name">CatSettings</span> <span class="token punctuation">{</span>
    weight<span class="token punctuation">:</span> <span class="token keyword">number</span><span class="token punctuation">;</span>
    name<span class="token punctuation">:</span> <span class="token keyword">string</span><span class="token punctuation">;</span>
    tailLength<span class="token operator">?</span><span class="token punctuation">:</span> <span class="token keyword">number</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">type</span> VetID <span class="token operator">=</span> <span class="token keyword">string</span> <span class="token operator">|</span> <span class="token keyword">number</span><span class="token punctuation">;</span>
  <span class="token keyword">function</span> <span class="token function">checkCat</span><span class="token punctuation">(</span>c<span class="token punctuation">:</span> Cat<span class="token punctuation">,</span> s<span class="token operator">?</span><span class="token punctuation">:</span> VetID<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这个<em>handle-title.js</em>文件我们可以直接在 index.html 文件里引入，如果不定义声明文件，我们直接在 index.ts 里使用，会报错：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript">console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">getTitle</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// error 找不到名称“getTitle”</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>documentTitle<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// error 找不到名称“documentTitle”</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">接下来我们为 handle-title.js 库编写一个声明文件：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token comment">// handle-title.d.ts</span>
<span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token function">setTitle</span><span class="token punctuation">(</span>title<span class="token punctuation">:</span> <span class="token keyword">string</span> <span class="token operator">|</span> <span class="token keyword">number</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword">void</span><span class="token punctuation">;</span>

<span class="token keyword">declare</span> <span class="token keyword">function</span> <span class="token function">getTitle</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword">string</span><span class="token punctuation">;</span>

<span class="token keyword">declare</span> <span class="token keyword">let</span> documentTitle<span class="token punctuation">:</span> <span class="token keyword">string</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">我们在 tsconfig.json 里，通过设置 include 来让编译器自动引入<code>"./src/"</code>文件夹下的所有声明文件：</p>
</div><div class="cl-preview-section"><pre class="  language-json"><code class="prism  language-json"><span class="token string">"include"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span>
    <span class="token string">"./src/**/*.ts"</span><span class="token punctuation">,</span>
    <span class="token string">"./src/**/*.d.ts"</span>
<span class="token punctuation">]</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这样我们定义在<code>src/types</code>文件夹下的所有声明文件就会起作用了，这下再看 index.ts 文件里使用 getTitle 和 documentTitle 就没有问题了。</p>
</div><div class="cl-preview-section"><h3 id="模块化库">5.2.2. 模块化库</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">模块化库即依赖模块解析器的库。之前讲模块的时候讲到过 CommonJS 和 ES6 模块，接下来我们看下如何判断一个库是模块化库。在模块库代码中，你一般会看到下面的情况之一：</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">无条件地调用 require 或 define 方法；</li>
<li style="font-size: 20px; line-height: 38px;">像 import * as a from 'b’或者 export c 这样的声明；</li>
<li style="font-size: 20px; line-height: 38px;">赋值给 exports.someName 或 module.exports。</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">因为模块化库依赖模块解析器环境，在使用这种库的时候，就已经引入模块解析器的 require 或 define 等方法了，所以模块化库会直接调用这些方法来加载代码；库中包括 import * as a from 'b’和 export c 这种模块中才有的引入和导出语句的话，基本就是模块库了；如果有赋值语句赋值给 exports.someName 或 module.exports，这种就是 CommonJS 模块的导出语句了。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">你极少会在模块化库中看到<em>对 window</em>或<em>global</em>的赋值，当然这不是绝对的，比如有的库需要操作 window 的一些属性，这就难免了。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">针对模块，官方有三个模板声明文件，分别是 module.d.ts、module-class.d.ts 和 module-function.d.ts：</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">如果这个模块引入后，可以直接当做函数调用，那可以参考 module-function.d.ts 文件；</li>
<li style="font-size: 20px; line-height: 38px;">如果模块引入后，可以直接当做类使用 new 关键字创建实例，可以参考 module-class.d.ts 文件；</li>
<li style="font-size: 20px; line-height: 38px;">如果模块不能被调用也不能当做类，参考 module.d.ts。</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">关于这几种模板，以及其它类型库声明文件的书写，我们会在后面实战课中通过几个实际的例子来进一步学习。</p>
</div><div class="cl-preview-section"><h3 id="umd-库">5.2.3. UMD 库</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">UMD 库将全局库和模块库的功能进行了结合，它会先判断环境中有没有模块加载器的一些特定方法。如果有，说明是模块加载器环境，UMD 库就会使用模块的方式导出；如果没有检测到这些方法，则会将内容添加到全局环境。一般你会在 UMD 库中看到这种逻辑判断：</p>
</div><div class="cl-preview-section"><pre class="  language-javascript"><code class="prism  language-javascript"><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>root<span class="token punctuation">,</span> factory<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> define <span class="token operator">===</span> <span class="token string">"function"</span> <span class="token operator">&amp;&amp;</span> define<span class="token punctuation">.</span>amd<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">define</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">"libName"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> factory<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> module <span class="token operator">===</span> <span class="token string">"object"</span> <span class="token operator">&amp;&amp;</span> module<span class="token punctuation">.</span>exports<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">factory</span><span class="token punctuation">(</span><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"libName"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    root<span class="token punctuation">.</span>returnExports <span class="token operator">=</span> <span class="token function">factory</span><span class="token punctuation">(</span>root<span class="token punctuation">.</span>libName<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">现在很多库都是 UMD 库，比如 jQuery、moment 等，你既可以在 html 文件中直接通过&lt;script&gt;标签引入它，也可以通过模块的形式引入。</p>
</div><div class="cl-preview-section"><h3 id="本节小结">本节小结</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">本小节我们学习了如何识别库的类型，我们讲了三类库的识别：全局库、模块化库和UMD库，这三类都是较为常见的，基本上所有的库都是这三类中的一种。每种类型的库都有它们的特点：</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">全局库：顶级的var或function声明语句，给window添加属性，判断document或window是否存在的判断逻辑；</li>
<li style="font-size: 20px; line-height: 38px;">模块化库：无条件地调用require或define方法，使用import或export导入和导出内容，赋值给exports或module.exports；</li>
<li style="font-size: 20px; line-height: 38px;">UMD库，判断<code>typeof define === “function” &amp;&amp; define.amd</code>的逻辑，判断<code>typeof module === “object” &amp;&amp; module.exports</code>的逻辑。</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">判断库的类型，可以首先看文档，看支持怎么使用，然后是看代码。使用这些方法，你足以判断出一个库的类型。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">下个小节我们就要正式开始学习为第三方库写声明文件了。<br>
<img src="http://img.mukewang.com/5d22b9d90001708216000578.jpg" alt="图片描述" data-original="http://img.mukewang.com/5d22b9d90001708216000578.jpg" class="" style="cursor: pointer;"></p>
</div></div>
            </div>
                            <!-- 买过的阅读 -->
                <div class="art-next-prev clearfix">
                                                                        <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/35/article/368">
                                                    <div class="prev l clearfix">
                                <div class="icon l">
                                    <i class="imv2-arrow3_l"></i>
                                </div>
                                <p>
                                    逐条来看tsconfig.json配置
                                </p>
                            </div>
                        </a>
                                                                                            <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/35/article/370">
                                                    <div class="next r clearfix">
                                <p>
                                    书写声明文件之砍柴：为不同类型库书写声明文件
                                </p>
                                <div class="icon r">
                                    <i class="imv2-arrow3_r"></i>
                                </div>

                            </div>
                        </a>
                                    </div>
                    </div>
        <div class="comments-con js-comments-con" id="coments_con">     <div class="number">精选留言 <span class="js-number">1</span></div>     <div class="comments">         <div class="input-fake js-showcommentModal">             欢迎在这里发表留言，作者筛选后可公开显示         </div>                      <ul class="comments-list js-comments-list">                                                        <li class="comment clearfix">                                          <a href="//www.imooc.com/u/7585930/articles" target="_blank">                             <div class="head-img l" style="background-image:url(//img3.mukewang.com/5b8ce5f00001875002000200-100-100.jpg)"></div>                         </a>                         <div class="comment-detail l">                             <div class="hoverDisplay">                                 <div class="com-author clearfix">                                                                                                               <a href="//www.imooc.com/u/7585930/articles" target="_blank">                                         <div class="name l">慕数据7345090</div>                                     </a>                                                                                                                                                                                              </div>                                 <div class="com-content">                                     老师，怎么引入handle-title.js呢，怎么引入本地文件？webpack怎么设置呢                                 </div>                                 <div class="com-other clearfix">                                                                              <!-- 没点过赞 -->                                         <div class="btn-agree js-agree l" data-commentid="1055">                                                                                  <i class="imv2-thumb_up"></i>                                             <span>0</span>                                         </div>                                                                                                               <div class="btn-reply l js-reply" data-replyid="1055">回复</div>                                     <!-- 没登录不显示举报 -->                                                                              <div class="btn-report l js-tip-off comment-report" data-id="1055" data-uid="7585930" data-src="/read/35/article/369" data-type="15">举报</div>                                                                          <div class="time r">2019-07-24</div>                                 </div>                             </div>                                                                                   </div>                     </li>                              </ul>                           </div>  </div>



    </div>
    
    
    

</div>
 
<!-- 专栏介绍页专栏评价 -->

<!-- 专栏介绍页底部三条评价 -->

<!-- 专栏阅读页弹层目录和介绍页页面目录 -->

<!-- 专栏阅读页发布回复 -->

<!-- 专栏阅读页发布评论 -->

<!-- 专栏阅读页底部评论 -->

<!-- 专栏阅读 单个 评论 -->

<!-- 新增回复和展开三条以外回复 -->

<!-- 立即订阅的弹窗 -->












</div></body></html>